<template>
	<view class="app">
		<view class="top">
			<view class="left">
				<!-- #ifdef MP-WEIXIN -->
				<view class="" @click="$fun.jump(`/pageB/noticeList/noticeInfo?id=19&type=20&name=提现规则`)">
					提现规则
				</view>
				<!-- #endif -->
				<view class="title">{{titleName}}</view>
				<view class="num">{{balance}}</view>
				<view class="num" style="color: #000000;font-size: 14px;font-weight: normal;margin-top: 10rpx;">
					可提现（{{balance1}})</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="" @click="$fun.jump(`./withdrawList?id=${this.id}&name=${this.titleName}`)">
				提现记录
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="" @click="$fun.jump(`/pageB/noticeList/noticeInfo?id=19&type=20&name=提现规则`)">
				提现规则
			</view>
			<!-- #endif -->
		</view>

		<view class="cell nocell" v-if="!isChecked">
			<text class="tit fill">{{placeholder}}</text>
		</view>
		<view class="cell">
			<text class="tit fill">提现金额</text>
			<input class="input" v-model="money" type="text" maxlength="11" placeholder="请输入提现金额"
				placeholder-style="color:#999;font-size:30rpx" />
		</view>
		<!-- 	<label class="radio" style="padding: 30rpx;"  @click="isChecked=!isChecked">
			<radio value="1" :checked="isChecked" /><text>开发票</text>
		</label> -->
		<view class="cell nocell">
			<text class="tit fill">选择收款方式</text>
		</view>

		<view class="member">
			<u-radio-group v-model="radioValue" placement="column">
				<view class="conter"
					:style="{backgroundColor:item.payWay.label==='支付宝'?'#e0f0ff':item.payWay.label==='微信'?'#def4f0':'#f6f1e6'}"
					@click="onChange(item,index)" v-for="(item,index) in list.payWays " :key='index'>
					<view class="data">
						<view class="" style="margin-right: 15rpx;">
							<image v-if="item.payWay.label==='支付宝'" style="width:40rpx;height: 40rpx;"
								src="@/static/alipay.png" mode=""></image>
							<image v-else-if="item.payWay.label==='微信'" style="width:40rpx;height: 40rpx;"
								src="@/static/weixin.png" mode=""></image>
							<image v-else style="width:40rpx;height: 40rpx;" src="@/static/bankCard.png" mode="">
							</image>
						</view>
						<view class="">{{item.payWay.label}}</view>
					</view>
					<view class="cent">
						<u-radio :customStyle="{marginBottom: '8px'}" :name="item.payWay.value"
							:label="item.payWay.label">
						</u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="cell" style="justify-content: space-between;">
			<input v-model="captcha" type="text"  placeholder="请输入验证码"
				placeholder-style="color:#999;font-size:30rpx" />
			<view class="" style="height: 100rpx;width: 300rpx;">
				<image style="height: 100%;width: 100%;" :src="imgUrlCode" mode="" @tap="getToken"></image>
			</view>
		</view>
		<view class="" style="margin: 50rpx 0;">
			<button class="add-btn" :loading="btnloading" @click="confirm"
				style="background-color: #5990FF !important;color: #FFFFFF;">提交</button>
		</view>
		<u-popup :show="show">
			<view class="popup-box">
				<view class="">
					<view class="title">收款方式</view>
					<view class="">
						<u-radio-group v-model="radiovalue1" placement="row" @change="changeGroup">
							<u-radio :customStyle="{margin: '20px'}" v-for="(item, index) in radiolist1" :key="index"
								:label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="cell" v-if="radiovalue1===3">
						<text class="tit fill">支付宝账号</text>
						<input class="input" v-model="receiveAccount" type="text" placeholder="请输入支付宝账号"
							placeholder-style="color:#999;font-size:30rpx" />
					</view>
					<view class="" v-if="radiovalue1===1">
						<view class="cell">
							<text class="tit fill">开户银行</text>
							<input class="input" v-model="bankName" type="text" placeholder="请输入开户银行"
								placeholder-style="color:#999;font-size:30rpx" />
						</view>
						<view class="cell">
							<text class="tit fill">支行</text>
							<input class="input" v-model="bankDepositName" type="text" placeholder="请输入银行支行"
								placeholder-style="color:#999;font-size:30rpx" />
						</view>
						<view class="cell">
							<text class="tit fill">银行账号</text>
							<input class="input" v-model="receiveAccount" type="text" placeholder="请输入银行账号"
								placeholder-style="color:#999;font-size:30rpx" />
						</view>
					</view>
					<button class="add-btn" :loading="btnloading" @click="handlePayWayAndAccount"
						style="background-color: #5990FF !important;color: #FFFFFF;margin-top:100rpx;">提交</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPwd: false,
				money: '',
				list: [],
				bankList: [],
				bid: '',
				id: '',
				titleName: '', //标题
				placeholder: '',
				active: "`",
				balance: '==',
				balance1: '==',
				withdrawal_type: 0,
				isChecked: false,
				btnloading: false,
				show: false,
				receiveAccount: '', //账号
				radioValue: '',
				radiolist1: [{
						name: '支付宝',
						disabled: false,
						value: 3
					},
					{
						name: '微信',
						disabled: false,
						value: 4
					},
					{
						name: '银行卡',
						disabled: false,
						value: 1
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				bankName: '',
				bankDepositName: '',
				imgUrlCode: 'http://www.firetigercloud.com/index.php?s=/captcha',
				captcha: '',
				uniqid: ''
			}
		},
		// onNavigationBarButtonTap(e) {
		// 	this.$fun.jump(`/pages/user/wallet/walletdetail?id=${this.id}`)
		// },
		onLoad(options) {
			this.id = options.id
			this.titleName = options.name
			this.bid = options.bid
			this.$fun.ajax.post('index/config', {}).then(res => {
				this.placeholder = res.data.withdrawal_title
				this.withdrawal_type = res.data.withdrawal_type
			})
			this.$fun.ajax.post('config/recharge', {
				id: options.id
			}).then(res => {
				this.balance = res.data.money
				this.balance1 = res.data.withdrawal
			})
			// this.getBank()

		},
		onShow() {
			// 查询当前认证信息
			this.GetUserProgress()
			this.getToken()
		},
		computed: {
			// openExamine() {
			// 	return this.$store.state.openExamine;
			// }
		},
		watch: {
			money(val) {
				if (val) {
					this.money1 = ''
				}
			}
		},
		methods: {
			async getToken() {
				const res = await this.$fun.ajax.post(
				'https://www.firetigercloud.com/index.php/api/withdraw/captcha', {})
				// this.$fun.ajax.post('captcha/captcha',{})
				if (res.code == 1) {
					this.uniqid = res.data.uniqid
					this.imgUrlCode = res.data.src
				}
			},
			changeGroup(e) {
				this.receiveAccount = '',
					this.bankName = '',
					this.bankDepositName = ''
			},
			// 设置收款方式
			async handlePayWayAndAccount() {
				if (!this.radiovalue1) return this.$fun.msg('请选择收款方式')
				if (this.radiovalue1 === 3 && !this.receiveAccount) {
					return this.$fun.msg('请输入支付宝账号')
				}
				if (this.radiovalue1 === 1 && !this.receiveAccount) {
					return this.$fun.msg('请输入银行账号')
				}
				if (this.radiovalue1 === 1 && !this.bankName) {
					return this.$fun.msg('请输入开户银行')
				}
				if (this.radiovalue1 === 1 && !this.bankDepositName) {
					return this.$fun.msg('请输入银行支行')
				}
				const params = {
					payWay: this.radiovalue1,
					receiveAccount: this.receiveAccount,
					bankName: this.bankName,
					bankDepositName: this.bankDepositName
				}
				const res = await this.$fun.ajax.post('withdraw/modifyPayWayAndAccount', params)
				if (res.code == 1) {
					this.$fun.msg('添加成功')
				}
				this.close()
			},
			close() {
				this.show = false
				this.changeGroup()
			},
			// 查询当前认证进度
			async GetUserProgress() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const res = await this.$fun.ajax.post('withdraw/GetUserProgress', {})
				// 判断是否已经提前传入个人信息
				const response = await this.$fun.ajax.post('withdraw/isBeforeUpload', {})
				let baseUrl = '/pageA/wallet/withdrawal?id=2&name=余额'
				// #ifdef H5
				baseUrl = 'https://www.firetigercloud.com/#/pageA/wallet/withdrawal?id=2&name=余额'
				// #endif
				// #ifdef APP-PLUS || H5
				// 获取H5认证页面链接
				const urlData = await this.$fun.ajax.post('withdraw/GetPersonalAuthH5Url', {
					returnUrl: baseUrl
				})
				// #endif
				// #ifdef MP-WEIXIN
				// 获取token
				const urlData = await this.$fun.ajax.post('withdraw/GetWxAuthUrl', {})
				// #endif
				uni.hideLoading()
				if (res.code == 1 && response.code == 1 && urlData.code == 1) {
					// 没有没有实名
					if (res.data.value == 1 || res.data.value == 2) {
						if (response.data === 1) {
							console.log(11, response);
							// #ifdef H5
							window.location.href = urlData.data
							// #endif
							// #ifdef APP-PLUS
							// 已传入 跳转h5实名认证
							// window.location.href = urlData.data
							this.$fun.jump(`/pageA/webView/webView?url=${urlData.data}&name=实名认证`, 0, 1200)
							// #endif
							// #ifdef MP-WEIXIN
							const data = {
								companyUid: urlData.data.companyUid,
								token: urlData.data.token
							}
							uni.navigateToMiniProgram({
								appId: 'wx28cc24276b125de5',
								path: 'sub-task/api/auth/index',
								envVersion: 'release',
								extraData: {
									token: data
								},
								success(s) {},
								fail(e) {}
							})
							// #endif
						} else {
							// 尚未提前传入，跳转提前传入实名信息
							this.$fun.msg('请先填写实名信息')
							this.$fun.jump('/pageA/authentication/authentication', 0, 1200)
							// this.$fun.jump(`/pageA/webView/webView?url=${urlData.data}&name=实名认证`, 0, 1200)

						}
					} else if (res.data.value == 3) {
						this.show = true
						// 没有设置收款方式 跳转填写收款方式
						console.log('没有设置收款方式 跳转填写收款方式');
					} else {
						// 已经设置收款方式 获取用户支付信息
						const resPay = await this.$fun.ajax.post('withdraw/GetPersonInfo', {})
						if (resPay.code == 1) {
							this.list = resPay.data
						}
					}
				}
			},
			// 获取银行卡信息
			getBank() {
				this.$fun.ajax.post('user/banklist', {}).then(res => {
					if (res.code == 1) {
						this.bankList = res.data
						let data = res.data
						// for(var i=0;i<data.length;i++){
						this.list = data;
						if (data.length == 0) {
							this.$fun.msg('请先添加提现方式')
							this.$fun.jump('/pageA/makemode/makemode', 0, 1200)
						}
						// }
					}
				})
			},
			onChange(item, index) {
				this.radioValue = item.payWay.value
			},
			async confirm() {
				if (this.btnloading) return this.$fun.msg('请稍等...')
				let {
					id,
					money,
					isChecked,
					radioValue,
					captcha,
					uniqid
				} = this;
				// #ifdef APP-PLUS || H5
				let platform = 3
				// #endif
				// #ifdef MP-WEIXIN
				let platform = 1
				// #endif

				let parms = {
					bid: '',
					id,
					money,
					bill: isChecked ? 1 : 0,
					payways: radioValue,
					platform: platform,
					code: captcha,
					uniqid: uniqid
				}
				if (!money) {
					this.$fun.msg('请输入提现金额')
					return
				}
				if (!captcha) {
					this.$fun.msg('请输入验证码')
					return
				}
				if (!radioValue) {
					this.$fun.msg('请选提现方式')
					return
				}
				if (this.balance < money) {
					this.$fun.msg('可提现余额不足')
					return
				}
				console.log(parms);
				this.btnloading = true
				const res = await this.$fun.ajax.post('withdraw/PublishFastTaskV3', {
					...parms
				})
				this.btnloading = false
				if (res.code == 1) {
					this.$fun.msg(res.msg)
					this.$fun.jump('', 4, 1200)
				}
			},
		},
		onNavigationBarButtonTap(e) {
			const index = e.index;
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.hideTitleNViewButtonRedDot({
				index
			});
			// #endif
			uni.navigateTo({
				url: `./withdrawList?id=${this.id}&name=${this.titleName}`
			})
		}

	}
</script>

<style scoped lang="scss">
	.app {
		padding: 20rpx;

		/* 头部 */
		.top {
			display: flex;
			justify-content: space-between;
			margin-left: 20rpx;

			.left {
				// margin-top: 40rpx;

				.title {
					font-size: 24rpx;
					color: #666;
				}

				.num {
					font-size: 48rpx;
					color: #000;
					margin-top: 30rpx;
					font-weight: bold;
				}

				.jyjl {
					font-size: 24rpx;
					color: #dd1021;
					margin-top: 50rpx;
				}
			}

			.rightimg {
				width: 233rpx;
				height: 240rpx;
				margin-right: 50rpx;
			}
		}

		/* 内容区 */
		.conter {
			.title {
				color: #666;
				margin-top: 50rpx;
				font-size: 30rpx;
			}

			.cent {
				margin-top: 25rpx;
				overflow: hidden;

				.list {
					width: 200rpx;
					height: 120rpx;
					border: 1rpx solid #e8e8e8;
					float: left;
					margin-right: 39rpx;
					margin-bottom: 45rpx;
					position: relative;
					text-align: center;
					line-height: 120rpx;
					border-radius: 15rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}

					input {
						height: 50rpx;
						margin-left: 10rpx;
						margin-top: 35rpx;
					}

					.van-cell {
						padding: 0;
						width: 180rpx;
					}

					image {
						width: 40rpx;
						height: 37rpx;
						position: absolute;
						bottom: 0;
						right: 0;
						display: none;
					}

					&.active {
						color: #dd1021;
						border: 1rpx solid #dd1021;

						image {
							display: block;
						}
					}
				}
			}
		}

		.bottom {
			width: 690rpx;

			.text {
				margin-bottom: 30rpx;
				display: flex;
				font-size: 24rpx;
				line-height: 40rpx;

				.van-checkbox {}

				navigator {
					color: #dd1021;
				}
			}

			button {
				width: 690rpx;
				height: 78rpx;
				line-height: 78rpx;
				background: #dd1021;
				color: #fff;
				border-radius: 78rpx;
				font-weight: 500;
				margin: 0;
				padding: 0;
			}
		}
	}

	/* 提现 */
	.member {
		.conter {
			width: 100%;
			height: 86rpx;
			background: #f3f3f3;
			margin: 20rpx auto;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;



			.cent {
				display: flex;
				align-items: center;
				margin-top: 0;

				::v-deep .u-radio {
					margin-bottom: 0 !important;
				}

			}

			.data {
				color: #000;
				font-size: 28rpx;
				margin-right: 20rpx;
				display: flex;
			}

			.van-checkbox {
				margin-top: 65rpx;
			}
		}
	}



	.nocell {
		border-bottom: none !important;
	}

	.cell {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		margin: 0 40rpx;
		border-bottom: 1px solid rgb(236, 236, 236);

		&:first-child {
			margin-bottom: 10rpx;
		}

		&:after {
			left: 40rpx;
			right: 40rpx;
			border-color: #d8d8d8;
		}

		.tit {
			font-size: 30rpx;
			color: #333;
		}

		.avatar-wrap {
			width: 120rpx;
			height: 120rpx;
			position: relative;
			border-radius: 100rpx;
			overflow: hidden;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 100rpx;
			}

			.progress {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 100rpx;
				box-shadow: rgba(0, 0, 0, .6) 0px 0px 0px 2005px;
				border-radius: 100rpx;
				transition: .5s;
				opacity: 0;

				&.no-transtion {
					transition: 0s;
				}

				&.show {
					opacity: 1;
				}
			}
		}

		.input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
		}

		switch {
			margin: 0;
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}

		.tip {
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999;
		}

		.checkbox {
			padding: 12rpx 0 12rpx 40rpx;
			font-size: 28rpx;
			color: #333;

			.mix-icon {
				margin-right: 12rpx;
				font-size: 36rpx;
				color: #ccc;
			}

			.icon-xuanzhong {
				color: $base-color;
			}
		}
	}

	.popup-box {
		// height: 800rpx;
		padding: 70rpx 30rpx;
		font-size: 26rpx;

		.title {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #232323;
		}
	}
</style>